<template>
    <div class="div-left">
        <el-image style="width: 30px; height: 30px" src="favicon.ico" fit="fill"/>
    </div>
    <div class="div-right">
        <UseDark v-slot="{ isDark, toggleDark }">
            <el-button type="primary" @click="toggleDark()">
                <el-icon v-if="isDark"><Moon /></el-icon>
                <el-icon v-else><Sunny /></el-icon>
                主题
            </el-button>
        </UseDark>
        <el-button type="primary" @click="console.log(this.$router)">
            <el-icon><Setting /></el-icon>
        </el-button>
    </div>
</template>
  
<script setup>
import { UseDark } from '@vueuse/components'
</script>

<style scoped>
.div-left {
    float: left;
}
.div-right {
    float: right;
}
</style>